<template>
    <div class="wiringDiagramView">
        <div :style="{ width: '100%', height: '100%' }" v-html="graphViewSrc" id="svgImgDom"></div>
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
import nuRadio from "@/components/base/radio"
import nuRadioButton from "@/components/base/radio-button"
import axios from 'axios'
import { getToken } from "@/utils/auth";
import downloadSvg from "@/assets/downloadSvg.js";
import store from "@/store";
import _ from 'lodash';
export default {
    name: "channelSet",
    components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog, nuRadio, nuRadioButton },
    data() {
        return {
            graphViewSrc: '',
            wiringDiagramObj: [
                {
                    fileName: '111',
                    tag: 'day'
                },
                {
                    fileName: '暖通图',
                    tag: 'hot'
                },
                {
                    fileName: '电力线路图',
                    tag: 'power'
                },
                {
                    fileName: '空调照明图',
                    tag: 'ktzm'
                },
            ],
            failCount: 0,
            cachedDynamicTagMap: null,
            setInterval: null,
            setIntervalChannel: null,
            dgmDrawType: '',
            panZoomTiger: null,
            channelStatus: [],
            fanUnitData: [], // 风机机组设备组[[{}]]
            fanUnitIndex: 0 // 当前风机设备组索引
        };
    },
    watch: {
        $route(route) {
            if (this.setInterval) {
                clearInterval(this.setInterval);
            }
            if (this.setIntervalChannel) {
                clearInterval(this.setIntervalChannel);
            }
        }
    },
    computed: {

    },
    created() {
    },
    mounted() {
        // this.openGraphView()
        // return false
        // let obj = this.wiringDiagramObj[0]
        // dgmDrawType (接线图类型)：1：一次接线图形式；0：数据总览图形式
        if (this.$route.query.hasOwnProperty('dgmDrawType')) {
            this.dgmDrawType = this.$route.query.dgmDrawType
        } else {
            this.dgmDrawType = 1
        }
        if (this.dgmDrawType == 0) {
            if (store && store.getters.sysEnergyType == 'WIND') {
                this.getFanUnitData(() => {
                    this.getwiringDiagramView();
                })
            } else {
                this.getwiringDiagramView();
            }
        } else {
            this.getwiringDiagramView();
        }
    },
    beforeDestroy() {
        if (this.setInterval) {
            clearInterval(this.setInterval);
        }
        if (this.setIntervalChannel) {
            clearInterval(this.setIntervalChannel);
        }
    },
    methods: {
        /**
         * 获取一次接线图
         */
        getwiringDiagramView() {
            let postData = {
                currentPage: 1,
                pageSize: 9999,
                dgmName: '',
                dgmDrawType: this.dgmDrawType
            };
            this.$httpGet(window.api.drawWiringDiagramInfo, postData).then(res => {
                if (res == undefined || res.total <= 0) {
                    return;
                }
                // dgmIfApply（是否应用，1：是；0：否）
                let row = res.rows.filter(item => item.dgmIfApply == 1)[0]
                this.openGraphView(row)
            }).catch(err => {

            });
        },
        /**
         * 查看mxgraph图形
         */
        openGraphView(row, obj) {
            this.$httpGet(window.api.drawWiringDownload + row.id).then(res => {
                // this.graphViewSrc = downloadSvg
                this.graphViewSrc = res
                let tag = 'day'; // night
                let dataDay = [
                    { "flowid": 1, "direction": 1, "color": "#009900" },
                    { "flowid": 2, "direction": 1, "color": "#FF0000" },
                    { "flowid": 3, "direction": 1, "color": "#FF0000" },
                    { "flowid": 4, "direction": 1, "color": "#009900" },
                    { "flowid": 5, "direction": 1, "color": "#009900" },
                    { "flowid": 6, "direction": 1, "color": "#009900" },
                    { "flowid": 7, "direction": 1, "color": "#009900" },
                    { "flowid": 8, "direction": -1, "color": "#FF0000" },
                    { "flowid": 9, "direction": 1, "color": "#FF0000" },
                    { "flowid": 10, "direction": -1, "color": "#FF0000" },
                    { "flowid": 11, "direction": 1, "color": "#009900" },
                    { "flowid": 12, "direction": -1, "color": "#009900" },
                    { "flowid": 13, "direction": -1, "color": "#FF8000" },
                    { "flowid": 14, "direction": -1, "color": "#009900" },
                    { "flowid": 15, "direction": -1, "color": "#009900" },
                    { "flowid": 16, "direction": -1, "color": "#009900" },
                    { "flowid": 17, "direction": -1, "color": "#FF0000" },
                    { "flowid": 18, "direction": 1, "color": "#FF0000" },
                    { "flowid": 19, "direction": 1, "color": "#FF0000" },
                    { "flowid": 20, "direction": -1, "color": "#009900" },
                    { "flowid": 21, "direction": -1, "color": "#009900" },
                    { "flowid": 22, "direction": -1, "color": "#FF8000" },
                    { "flowid": 23, "direction": 1, "color": "#009900" },
                    { "flowid": 24, "direction": 0, "color": "#FF8000" }];

                let dataNight = [
                    { "flowid": 1, "direction": 0, "color": "#009900" },
                    { "flowid": 2, "direction": 0, "color": "#FF0000" },
                    { "flowid": 3, "direction": 0, "color": "#FF0000" },
                    { "flowid": 4, "direction": 0, "color": "#009900" },
                    { "flowid": 5, "direction": 0, "color": "#009900" },
                    { "flowid": 6, "direction": 0, "color": "#009900" },
                    { "flowid": 7, "direction": 0, "color": "#009900" },
                    { "flowid": 8, "direction": 0, "color": "#FF0000" },
                    { "flowid": 9, "direction": 0, "color": "#FF0000" },
                    { "flowid": 10, "direction": 0, "color": "#FF0000" },
                    { "flowid": 11, "direction": 0, "color": "#009900" },
                    { "flowid": 12, "direction": -1, "color": "#009900" },
                    { "flowid": 13, "direction": -1, "color": "#FF8000" },
                    { "flowid": 14, "direction": -1, "color": "#009900" },
                    { "flowid": 15, "direction": -1, "color": "#009900" },
                    { "flowid": 16, "direction": -1, "color": "#009900" },
                    { "flowid": 17, "direction": -1, "color": "#FF0000" },
                    { "flowid": 18, "direction": 1, "color": "#FF0000" },
                    { "flowid": 19, "direction": 1, "color": "#FF0000" },
                    { "flowid": 20, "direction": 0, "color": "#009900" },
                    { "flowid": 21, "direction": 1, "color": "#009900" },
                    { "flowid": 22, "direction": 1, "color": "#FF8000" },
                    { "flowid": 23, "direction": 1, "color": "#009900" },
                    { "flowid": 24, "direction": 1, "color": "#FF8000" }];

                this.$nextTick(() => {
                    // 设置svg画面拖动和缩放
                    this.panZoomTiger = this.initZoomPan();
                    if (this.dgmDrawType == 0) {
                        this.panZoomTiger.zoom(1.14);
                        let pan = this.panZoomTiger.getPan()
                        this.panZoomTiger.pan({ x: pan.x, y: pan.y + 123 })
                        this.panZoomTiger.disableZoom();
                        this.panZoomTiger.disablePan();
                        this.setTransformText()
                    } else {
                        this.panZoomTiger.zoom(0.6);
                        let pan = this.panZoomTiger.getPan()
                        this.panZoomTiger.pan({ x: pan.x - 300, y: pan.y - 70 })
                    }
                    // 阻止网页右键菜单
                    $("body").smartMenu([], { name: "body" }); $("body").smartMenu([], { name: "body" });
                    $('.button.btn-click').on('click', (e) => {
                        // 前进后退按钮
                        let b = e.currentTarget.getAttribute('btnname')
                        // 1: 后退; 2:前进
                        if (b == 1) {
                            if (this.fanUnitIndex <= 0) {
                                this.fanUnitIndex = this.fanUnitData.length - 1
                            } else {
                                this.fanUnitIndex--
                            }
                        } else {
                            if (this.fanUnitIndex >= this.fanUnitData.length - 1) {
                                this.fanUnitIndex = 0
                            } else {
                                this.fanUnitIndex++
                            }
                        }
                        this.setTransformText()
                    })
                    // 解析svg dom
                    // 获取所有动态数据标识，并缓存。为刷新数据做准备
                    this.cachedDynamicTagMap = parseSvg();
                    // 调整svg画面图元。将fill=none的图元设置为fill='#000'
                    adjustSvgSymbol($("defs")[0]);

                    if (tag == "day" || tag == "night") {
                        let data = null;
                        if (tag == "day") {
                            data = dataDay;
                        } else if (tag == "night") {
                            data = dataNight;
                        }
                        parseSvgFlow(data, 31, 30, 32);
                        if (document.querySelector('[flowid="32"]') != null) {
                            document.querySelector('[flowid="32"]').setAttribute("class", "button g2");
                        }
                        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                            $('.box_in').css('-webkit-animation', 'none');
                            $('.moveImg').css('-webkit-animation', 'none');
                        } else {
                            showHide();
                        }
                    } else {
                        parseSvgPower();
                    }
                    // polling远程实时库数据，刷新svg画面
                    // pollingRequestData数据结构 = [{id:384477, code:'status'}, {id:5567, code:'ia'}];
                    let keys = getPollingRequestData(this.cachedDynamicTagMap);
                    // 获取标识牌类型码表
                    // this.getDrawWiringDicts().then(res => {
                    //     getSignTypeDict(res);
                    // })
                    this.getChannelStatus()
                    this.polling();
                    this.setInterval = setInterval(() => {
                        this.polling();
                    }, 2000);
                    this.setIntervalChannel = setInterval(() => {
                        this.getChannelStatus()
                    }, 2 * 60 * 1000);

                })
            }).catch(err => { });
        },
        // svg缩放拖拽
        initZoomPan() {
            const eventsHandler = {
                haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'],
                init: function (options) {
                    var instance = options.instance,
                        initialScale = 1,
                        pannedX = 0,
                        pannedY = 0
                    // Init Hammer
                    // Listen only for pointer and touch events
                    this.hammer = Hammer(options.svgElement, {
                        inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
                    })
                    // Enable pinch
                    this.hammer.get('pinch').set({ enable: true })
                    // Handle double tap
                    this.hammer.on('doubletap', function (ev) {
                        instance.zoomIn()
                    })
                    // Handle pan
                    this.hammer.on('panstart panmove', function (ev) {
                        // On pan start reset panned variables
                        if (ev.type === 'panstart') {
                            pannedX = 0
                            pannedY = 0
                        }
                        // Pan only the difference
                        instance.panBy({ x: ev.deltaX - pannedX, y: ev.deltaY - pannedY })
                        pannedX = ev.deltaX
                        pannedY = ev.deltaY
                    })
                    // Handle pinch
                    this.hammer.on('pinchstart pinchmove', function (ev) {
                        // On pinch start remember initial zoom
                        if (ev.type === 'pinchstart') {
                            initialScale = instance.getZoom()
                            instance.zoom(initialScale * ev.scale)
                        }
                        instance.zoom(initialScale * ev.scale)
                    })

                    // Prevent moving the page on some devices when panning over SVG
                    options.svgElement.addEventListener('touchmove', function (e) { e.preventDefault(); });
                },
                destroy: function () {
                    this.hammer.destroy()
                }
            }
            const element = document.querySelector('#svgImgDom').firstElementChild;
            // var g = document.getElementById("vertex").getBBox()
            // let rect = $(element).children()[3]
            // console.log(rect, g)
            element.style.width = this.dgmDrawType == 0 ? '1590px' : "100%"
            element.style.height = this.dgmDrawType == 0 ? '1800px' : '100%'
            element.style.pointerEvents = this.dgmDrawType == 0 ? 'none' : 'all'
            let self = this
            var panZoomTiger = svgPanZoom(element, {
                zoomEnabled: true,
                controlIconsEnabled: true,
                dblClickZoomEnabled: false,
                fit: true,
                center: false,
                contain: true,
                customEventsHandler: eventsHandler,
                panEnabled: true,
                // zoomScaleSensitivity: 1,
                // 'minZoom': -50,
                // 'maxZoom': 50,
                beforeZoom: function (oldZoom, newZoom) {
                    if (self.dgmDrawType == 0) {
                        return true
                    }
                },
                onZoom: function (newPan) {
                    if (self.dgmDrawType == 0) {
                        return false
                    }
                },
                beforePan: function (oldPan, newPan) {
                    if (self.dgmDrawType == 0) {
                        return { x: false, y: true }
                    }
                },
                onPan: function (newPan) {
                    if (self.dgmDrawType == 0) {
                        return false
                    }
                },
                onUpdatedCTM: function () {
                    return false
                }
            });
            let a = document.getElementById('svg-pan-zoom-controls');
            if (a) {
                a.remove();
            }
            return panZoomTiger;
        },
        /**
         * 获取标识牌类型码表
         * @param {*} obj 
         */
        async getDrawWiringDicts(obj) {
            let data = await this.$httpGet(window.api.drawWiringDicts).then(res => {
                return res
            }).catch(err => { });
            return data
        },
        async polling() {
            let meterIds = {}
            let channelIds = {}
            this.cachedDynamicTagMap.forEach(item => {
                item.forEach(o => {
                    if (o.cimType != 900) {
                        meterIds[o.meterId] = o
                    } else {
                        channelIds[o.meterId] = o
                    }
                })
            });

            if (!Object.keys(meterIds).length) {
                return false;
            }

            $.ajax({
                type: 'GET',
                headers: { 'isswagger': 'true' },
                url: process.env.VUE_APP_BASE_SCADA + window.api.getMeterByIds + "?meterIds=" + Object.keys(meterIds).join(),
                contentType: 'application/json;charset=UTF-8',
                success: (res) => {
                    if (res.code == 200) {
                        this.failCount = 0;
                        let rows = []
                        res.meters.forEach((item, i) => {
                            // 遥测
                            let obj = res.realTelemetrys.filter(v => v.meterId == item.meterId && v.relatedDevId == item.relatedDevId)?.[0] || {}
                            // 遥调
                            let obj1 = res.signalCommands.filter(v => v.meterId == item.meterId && v.relatedDevId == item.relatedDevId)?.[0] || {}
                            // 遥信
                            let obj2 = res.yxCommands.filter(v => v.meterId == item.meterId)?.[0] || {}

                            // 遥测无数据默认展示--
                            if (!Object.keys(obj).length && item.mesaType == 201) {
                                obj = { cmdValue: '--' }
                            } else {
                                if (obj?.cmdValueDesc) {
                                    obj.cmdValue = obj.cmdValueDesc
                                }
                            }
                            // if (!Object.keys(obj1).length && item.mesaType == 202) {
                            //     obj1 = { cmdValue: 0 }
                            // }
                            // 遥信无数据默认展示0
                            if (!Object.keys(obj2).length && item.mesaType == 202) {
                                obj2 = { cmdValue: 0 }
                            } else {
                                if (obj2?.cmdValueDesc) {
                                    obj2.cmdValue = obj2.cmdValueDesc
                                }
                            }

                            // 遥调无数据默认展示--
                            if (!Object.keys(obj1).length && item.mesaType == 203) {
                                obj1 = { cmdValue: '--' }
                            }
                            rows.push({ ...obj, ...obj1, ...obj2, ...item })
                        })
                        if (this.channelStatus && this.channelStatus.length) {
                            let d = this.channelStatus.map(item => {
                                return {
                                    meterId: item.channelId,
                                    relatedDevId: item.belongGroupId,
                                    cmdValue: item.channelStatus
                                }
                            })
                            rows.push(...d)
                        }
                        let resRdbData = rows;
                        // console.log(resRdbData, this.cachedDynamicTagMap)
                        // 将remote数据渲染到svg画面。仅渲染变动数据
                        renderRdbData(JSON.parse(JSON.stringify(resRdbData)), this.cachedDynamicTagMap);
                    } else {
                        this.failCount = this.failCount + 1;
                        if (this.failCount == 5) {
                            this.$message({
                                type: 'info',
                                message: '实时数据获取失败'
                            });
                        } else if (this.failCount > 5 && (this.failCount - 5) % 10 == 0) {
                            this.$message({
                                type: 'info',
                                message: '实时数据获取失败'
                            });
                        }
                    }
                },
                error: (error) => {
                    this.failCount = this.failCount + 1;
                    // 连续5次访问失败，弹窗提醒
                    if (this.failCount == 5) {
                        if (typeof error.responseJSON === 'object') {
                            this.$message({
                                type: 'info',
                                message: error.responseJSON.message
                            });
                        }
                    } else if (this.failCount > 5 && (this.failCount - 5) % 10 == 0) {
                        // 每N次提示一次
                        if (typeof error.responseJSON === 'object') {
                            this.$message({
                                type: 'info',
                                message: JSON.stringify(error.responseJSON.message)
                            });
                        }
                    }

                }
            })
        },
        async getChannelStatus() {
            let channelIds = {}
            this.cachedDynamicTagMap.forEach(item => {
                item.forEach(o => {
                    if (o.cimType != 900) { }
                    else {
                        channelIds[o.meterId] = o
                    }
                })
            });
            this.channelStatus = []
            if (Object.keys(channelIds).length) {
                this.channelStatus = await this.$httpPost(window.api.getChannelStatus, { ids: Object.keys(channelIds) }).then(res => {
                    if (res.code == 200) {
                        return res.data.realChannel
                    }
                }).catch(err => { });
            }
        },
        /**
         * @Author: ybf
         * @LastEditTime: 
         * @description: 格式化风机机组展示数据（数据总览）
         * @return {*} [[{}]]
         */
        async getFanUnitData(fun) {
            let p = {
                channel: 15,

                devType: 308,
                pageSize: 9999,
                pageNum: 1,
                currentPage: 1,
                channelGroupId: 15,
                ioaOrder: 'asc',
            }
            let b = [], c = {}, d = []
            // 获取风机机组遥测信息
            let a = await this.getMeasurationInfoSheet({ ...p, mesaType: 201 })
            let e = await this.getMeasurationInfoSheet({ ...p, mesaType: 202 })
            a.forEach((item, i) => {
                if (item.meterName.indexOf('风机有功功率') > -1) {
                    if (Object.prototype.toString.call(c['风机有功功率']) == '[object Array]') {
                        c['风机有功功率'].push(item)
                    } else {
                        c['风机有功功率'] = [item]
                    }

                }
                if (item.meterName.indexOf('风机无功功率') > -1) {
                    if (Object.prototype.toString.call(c['风机无功功率']) == '[object Array]') {
                        c['风机无功功率'].push(item)
                    } else {
                        c['风机无功功率'] = [item]
                    }

                }
                if (item.meterName.indexOf('风机风速') > -1) {
                    if (Object.prototype.toString.call(c['风机风速']) == '[object Array]') {
                        c['风机风速'].push(item)
                    } else {
                        c['风机风速'] = [item]
                    }

                }
                if (item.meterName.indexOf('环境温度') > -1) {
                    if (Object.prototype.toString.call(c['环境温度']) == '[object Array]') {
                        c['环境温度'].push(item)
                    } else {
                        c['环境温度'] = [item]
                    }

                }
                if (item.meterName.indexOf('风机状态') > -1) {
                    if (Object.prototype.toString.call(c['风机状态']) == '[object Array]') {
                        c['风机状态'].push(item)
                    } else {
                        c['风机状态'] = [item]
                    }

                }
            })
            e.forEach((item, i) => {
                if (item.meterName.indexOf('并网') > -1) {
                    if (Object.prototype.toString.call(c['并网/离网']) == '[object Array]') {
                        c['并网/离网'].push(item)
                    } else {
                        c['并网/离网'] = [item]
                    }

                }
            })
            c['环境温度'].forEach((item, i) => {
                let o = {
                    temperature: item,
                    activePower: c['风机有功功率'][i],
                    reactivePower: c['风机无功功率'][i],
                    windSpeed: c['风机风速'][i],
                    status: c['风机状态'][i],
                    connectedOff: c['并网/离网'][i]
                }
                if (i + 1 <= Math.floor(c['环境温度'].length / 8) * 8) {
                    if ((i + 1) % 8 != 0) {
                        b.push(o)
                    } else {
                        b.push(o)
                        d.push(b)
                        b = []
                    }
                } else {
                    if (d[d.length - 1].length == 8) {
                        d[d.length] = [o]
                    } else {
                        d[d.length - 1].push(o)
                    }
                }
            })
            // console.log(d)
            this.fanUnitData = d
            if (fun) {
                await fun()
            }
        },
        /**
         * @Author: ybf
         * @LastEditTime: 
         * @description: 获取风机量测列表（数据总览）
         * @param {*} postData
         * @return {*}
         */
        getMeasurationInfoSheet(postData) {
            return new Promise((resolve, reject) => {
                this.$httpGet(window.api.getMeasurationInfoSheet, postData)
                    .then((res) => {
                        if (res.code) {
                            resolve(res.rows)
                        }
                    })
                    .catch((err) => { });
            })
        },
        /**
         * @Author: ybf
         * @LastEditTime: 
         * @description: 设置风机机组动态展示（数据总览）
         * @return {*}
         */
        setTransformText() {
            let data = this.fanUnitData[this.fanUnitIndex]
            // console.log(data)
            $.each($('.transformText'), function (item, i) {
                let name = this.getAttribute("keyname").split('_')[0]
                let key = this.getAttribute("keyname").split('_')[1]
                if (data?.[key - 1]) {
                    if (name == 'fanName') {
                        // 设备名称
                        this.children[0].children[0].children[0].innerText = data[key - 1].activePower.relatedDevName
                    } else if (name == 'activePower') {
                        // 有功功率
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].activePower.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].activePower.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].activePower.relatedDevType)
                    } else if (name == 'reactivePower') {
                        // 无功功率
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].reactivePower.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].reactivePower.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].reactivePower.relatedDevType)
                    } else if (name == 'windSpeed') {
                        // 风机风速
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].windSpeed.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].windSpeed.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].windSpeed.relatedDevType)
                    } else if (name == 'temperature') {
                        // 环境温度
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].temperature.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].temperature.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].temperature.relatedDevType)
                    } else if (name == 'status') {
                        // 风机状态
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].status.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].status.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].status.relatedDevType)
                    } else if (name == 'connectedOff') {
                        // 并网/离网
                        this.children[1].children[1].setAttribute('objectid', data[key - 1].connectedOff.meterId)
                        this.children[1].children[1].setAttribute('fieldcode', data[key - 1].connectedOff.relatedDevId)
                        this.children[1].children[0].setAttribute('cimtype', data[key - 1].connectedOff.relatedDevType)
                    }
                }
            })
            // 获取所有动态数据标识，并缓存。为刷新数据做准备
            this.cachedDynamicTagMap = parseSvg();
            this.polling();
        }
    }
};
</script>
<style>
.button.btn-click {
    cursor: pointer;
    pointer-events: all;
}
</style>
<style scoped lang="scss">
.wiringDiagramView {
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: #011536;
    overflow: auto;

}
</style>
    
    